<!DOCTYPE html>
<HTML>
<HEAD><meta name="viewport" content="width=device-width, initial-scale=1">
<Title>3D Donut Chart</Title>
<link type='text/css' rel='Stylesheet' href="maxchartapi.css" />
</HEAD>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" rightmargin="0" marginwidth="0" marginheight="0">

<p class="heading0">ChartDirector 7.0 (Java Edition)</p>
<p class="heading1">3D Donut Chart</p>
<hr class="separator">
<div class="content">
<img src="images/threeddonut.png" width='600' height='320'>
<br><br>
This example demonstrates a 3D donut chart with sector gradient shading. It also demonstrates gradient color background, rounded frame, custom sector colors, and using <a href="cdml.htm">CDML</a> and <a href="paramsub.htm">Parameter Substitution and Formatting</a> to format sector labels<br><br>
<ul><li> The gradient background is achieved by using <a href="BaseChart.linearGradientColor.htm">BaseChart.linearGradientColor</a> to define the gradient color, then use <a href="BaseChart.setBackground.htm">BaseChart.setBackground</a> to set it as the chart background color.<br><br>
<li> The rounded frame is configured using <a href="BaseChart.setRoundedFrame.htm">BaseChart.setRoundedFrame</a>.<br><br>
<li> The sector colors are set using <a href="BaseChart.setColors.htm">BaseChart.setColors</a>. The sector gradient shading and thick sector border is configured using <a href="PieChart.setSectorStyle.htm">PieChart.setSectorStyle</a>.<br><br>
<li> The sector label style are configured using <a href="PieChart.setLabelStyle.htm">PieChart.setLabelStyle</a>. It returns a <a href="TextBox.htm">TextBox</a> object representing the sector label prototype. The gradient background color and rounded corners of the sector labels are configured using the <a href="Box.setBackground.htm">Box.setBackground</a> and <a href="Box.setRoundedCorners.htm">Box.setRoundedCorners</a> methods of the label prototype.<br><br>
<li> The sector label contents are configured using <a href="PieChart.setLabelFormat.htm">PieChart.setLabelFormat</a>. The template is specified using <a href="cdml.htm">CDML</a> and <a href="paramsub.htm">Parameter Substitution and Formatting</a>. It consists of two lines using different fonts. This first line shows the sector label, while the second line shows the sector value and percentage.</ul>
</div>
<p class="heading1a">Source Code Listing</p>
<div class="content">
<b>[JSP Version]</b> jspdemo/threeddonut.jsp
<div class='codeblock'><code class='pre'>&lt;%@page import="ChartDirector.*, java.util.*" %&gt;
&lt;%
// The data for the pie chart
double[] data = {20, 10, 15, 12};

// The labels for the pie chart
String[] labels = {"Labor", "Licenses", "Facilities", "Production"};

// The colors to use for the sectors
int[] colors = {0x66aaee, 0xeebb22, 0xcccccc, 0xcc88ff};

// Create a PieChart object of size 600 x 320 pixels. Use a vertical gradient color from deep blue
// (000066) to blue (0000cc) as background. Use rounded corners of 20 pixels radius.
PieChart c = new PieChart(600, 320);
c.setBackground(c.linearGradientColor(0, 0, 0, c.getHeight(), 0x000066, 0x0000cc));
c.setRoundedFrame(0xffffff, 20);

// Add a title using 18pt Times New Roman Bold Italic font in white (ffffff) color. Set top/bottom
// margins to 8 pixels.
TextBox title = c.addTitle("Donut Chart Demonstration", "Times New Roman Bold Italic", 18, 0xffffff)
    ;
title.setMargin2(0, 0, 8, 8);

// Add a separator line in white color just under the title
c.addLine(10, title.getHeight(), c.getWidth() - 11, title.getHeight(), 0xffffff);

// Set donut center at (300, 170), and outer/inner radii as 120/60 pixels
c.setDonutSize(300, 170, 120, 60);

// Draw the pie in 3D with a pie thickness of 25 pixels
c.set3D(25);

// Set the pie data and the pie labels
c.setData(data, labels);

// Set the sector colors
c.setColors2(Chart.DataColor, colors);

// Use local gradient shading for the sectors
c.setSectorStyle(Chart.LocalGradientShading);

// Set sector border color to same as fill color. Set label join line color to white (ffffff)
c.setLineColor(Chart.SameAsMainColor, 0xffffff);

// Use the side label layout method, with the labels positioned 16 pixels from the donut bounding
// box
c.setLabelLayout(Chart.SideLayout, 16);

// Set the sector label format. The label consists of two lines. The first line is the sector name
// in Times Bold Italic font and is underlined. The second line shows the data value and percentage.
c.setLabelFormat(
    "&lt;*block,halign=left*&gt;&lt;*font=Times New Roman Bold Italic,size=12,underline=1*&gt;{label}" +
    "&lt;*/font*&gt;&lt;*br*&gt;US$ {value}K ({percent}%)");

// Set the label box background color the same as the sector color. Use soft lighting effect with
// light direction from right. Use rounded corners.
TextBox t = c.setLabelStyle();
t.setBackground(Chart.SameAsMainColor, Chart.Transparent, Chart.softLighting(Chart.Right));
t.setRoundedCorners();

// Output the chart
WebChartViewer viewer = new WebChartViewer(request, "chart1");
viewer.setChart(c, Chart.SVG);

// Include tool tip for the chart
viewer.setImageMap(c.getHTMLImageMap("", "", "title='{label}: US${value}K ({percent}%)'"));
%&gt;
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
    &lt;title&gt;3D Donut Chart&lt;/title&gt;
    &lt;!-- Include ChartDirector Javascript Library to support chart interactions --&gt;
    &lt;script type="text/javascript" src="cdjcv.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body style="margin:5px 0px 0px 5px"&gt;
    &lt;div style="font:bold 18pt verdana;"&gt;
        3D Donut Chart
    &lt;/div&gt;
    &lt;hr style="border:solid 1px #000080; background:#000080" /&gt;
    &lt;div style="font:10pt verdana; margin-bottom:1.5em"&gt;
        &lt;a href="viewsource.jsp?file=&lt;%=request.getServletPath()%&gt;"&gt;View Source Code&lt;/a&gt;
    &lt;/div&gt;
    &lt;!-- ****** Here is the chart image ****** --&gt;
    &lt;%= viewer.renderHTML(response) %&gt;
&lt;/body&gt;
&lt;/html&gt;</code></div>
</div>
<br><hr class="separator"><div class="copyright">&copy; 2022 Advanced Software Engineering Limited. All rights reserved.</div>
</body>
</HTML>
